<script setup>
  import useTodoStore from '../store/todos';
  const todos = useTodoStore()
</script>

<template>
  <footer class="footer">
    <span class="todo-count"><strong>{{ todos.leftCount }}</strong> 未完成</span>
    <ul class="filters">
      <li v-for="item in todos.state" :key="item">
        <a @click="todos.changeState(item)" :class="{selected:item === todos.active}" href="#/">{{ item }}</a>
      </li>
    </ul>
    <button @click="todos.clearComplate()" class="clear-completed">清空已完成</button>
  </footer>
</template>

<style lang="less" scoped></style>
